<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<a href="#007" class="dropdown-toggle" data-toggle="dropdown"> <i
	class="icon-envelope"></i> Thông báo <span class="badge badge-warning" id="number_notify"></span>
	<b class="caret"></b>
</a>
<ul id="notification"
	class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close "
	style="width: 360px; max-height: 400px;overflow-y: auto;">
	<li class='divider'></li>
	<li><a href="GetAllNotification.do" style="text-align: center;background: #62a8d1;color: white;">
		<b>Xem tất cả thông báo</b>
	</a></li>
</ul>
<tag:SocketTag></tag:SocketTag>

<script>
$(document).ready (function(){
    $( '#notification' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
	    var e0 = e.originalEvent,
	        delta = e0.wheelDelta || -e0.detail;
	    
	    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
	    e.preventDefault();
	});
});

var username = document.getElementById("hiddenUsername").value;
socket.emit('submit', username);
socket.on('result',function(data) {
		if (data != null) {
		   
			var us = document.getElementById("notification");
			if(document.getElementById("number_notify").innerHTML == "")
				{
				document.getElementById("number_notify").innerHTML=parseInt(data.listOfNotification.length);
				}else{
					document.getElementById("number_notify").innerHTML=parseInt($("#number_notify").html())
					+parseInt(data.listOfNotification.length);		
				}
			
			
			for ( var i = 0; i < data.listOfNotification.length; i++) {
			    var type = data.listOfNotification[i].typeOfNotification;
			    var picture = "";
				if (type == 'timmer') {
				    picture = "<img src='./img/timerIcon.png'>";
				} else if (type == 'comment') {
				    picture = "<img src='./img/commentIcon.png'>";
				} else if (type == 'info') {
				    picture = "<img src='./img/infoIcon.png'>";
				} else {
				    picture = "<img src='./img/messageIcon.png'>";
				}
				
				us.innerHTML = 
				   	"<li class='divider'></li>" +
					"<li class='message-preview' style='text-align: left;'>" +
					"<a href='GetEventByNotification.do?id="+data.listOfNotification[i].eventID +
						"&&notificationId="+data.listOfNotification[i].notificationId+"'>" +						
						"<div class='row' style='white-space: normal;'>"+
							"<div class='col-md-2'>"+
							"<span class='avatar' style='float: left; margin-right: 10px;'>" + picture + "</span>" +
							"</div>"+
							"<div class='col-md-10'>"+
								"<div class='row'>"+
									"<span class='name' style='display: block; font-weight: bold;'>" + 
										data.listOfNotification[i].content +
									"</span>" +
								"</div>"+								
							"</div>"+
						"</div>"+
					"</div>"+
					"</a>" +
					"</li>"
					+ us.innerHTML;
				socket.emit('sucesss',data.listOfNotification[i].notificationId);
			}
		}
	});
socket.on('haveComment',function(data) {
	alert("OK");
});
</script>
	